<template>
    <div class="editor-container">
        <el-dialog title="创建技能" :visible.sync="createSkillDialogVisible">
            <el-tabs v-model="createSkillTab">
                <el-tab-pane label="创建技能" name="create">
                    <skill-create-form @complete="handleCreateSkill">

                    </skill-create-form>
                </el-tab-pane>
                <el-tab-pane label="引用技能" name="attach">
                    <career-skill-attach-form :career-id="careerId"
                                              :errors="attachSkillErrors"
                                              @complete="onSubmitAttachSkill"></career-skill-attach-form>

                </el-tab-pane>
                <!--<el-tab-pane label="复制技能" name="copy">-->
                    <!--<career-skill-attach-form :career-id="careerId"-->
                                              <!--:errors="copySkillErrors"-->
                                              <!--@complete="onSubmitCopySkill"></career-skill-attach-form>-->
                <!--</el-tab-pane>-->

            </el-tabs>

        </el-dialog>
        <el-dialog title="编辑技能" :visible.sync="editSkillDialogVisible">
            <el-tabs v-model="editSkillDialogActiveName">
                <el-tab-pane label="技能信息" name="skill">
                    <skill-edit-form @complete="handleEditSkillComplete" :skill-id="focusNodeId"
                                     v-if="focusNodeId"></skill-edit-form>
                </el-tab-pane>
                <el-tab-pane label="本节点信息" name="node">
                    <career-skill-edit-form :skill-id="focusNodeId" :career-id="careerId"
                                            v-if="focusNodeId"></career-skill-edit-form>
                </el-tab-pane>
                <el-tab-pane label="关联节点" name="relation-node">
                    <career-skill-relation :skill-id="focusNodeId" :career-id="careerId"
                                           v-if="focusNodeId" @complete="completeLink" @detach="completeLink"></career-skill-relation>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <editor-edge v-for="edge in edges" :key="'edge-'+edge.node_id+'-'+edge.next_node_id"
                     :edge="edge"></editor-edge>
        <div class="step" v-for="(step,index) in steps" :key="index" ref="editor-step">
            <div class="step-num">{{index+1 }}</div>
            <div class="box box-normal" v-for="(skill,i) in step" :key="'node-'+i" :data-step="index"
                 :data-node="skill.id" @click="focusNode(skill.id)" :class="{focus:skill.id===focusNodeId}"
                 ref="editor-node">
                <div class="fixed-bottom">
                    <el-button-group>
                        <el-button size="mini" icon="el-icon-caret-top"
                                   @click="nodeAddStep(skill.id)"></el-button>
                        <el-button size="mini" icon="el-icon-caret-bottom"
                                   @click="nodeDecreaseStep(skill.id)"></el-button>
                        <el-button size="mini" icon="el-icon-edit"
                                   @click="editNode"></el-button>
                        <el-button size="mini" icon="el-icon-delete" @click="deleteNode(skill.id)"></el-button>
                    </el-button-group>
                </div>
                <span class="node-text">{{skill.id}} {{skill.title}}</span>

            </div>
            <el-button class="box button-new-tag" size="small" @click="addSkill(index)" icon="el-icon-plus">添加技能
            </el-button>
        </div>

        <el-button class="step add" shadow="hover" @click="addNewStep" icon="el-icon-plus">
            添加
        </el-button>
    </div>

</template>

<script>
    import EditorEdge from "./EditorEdge";
    import SkillCreateForm from "./SkillCreateForm";
    import SkillEditForm from "./SkillEditForm";
    import CareerSkillRelation from "./CareerSkillRelation";
    import CareerSkillEditForm from "./CareerSkillEditForm";

    import GraphicMixin from "../mixins/GraphicMixin";
    import CareerSkillAttachForm from "./CareerSkillAttachForm";

    export default {
        props: {careerId: {type: Number, required: true}},
        components: {
            EditorEdge,
            SkillCreateForm,
            SkillEditForm,
            CareerSkillEditForm,
            CareerSkillRelation,
            CareerSkillAttachForm,
        },
        mixins: [GraphicMixin],
        data() {
            return {
                createSkillDialogVisible: false,
                editSkillDialogVisible: false,
                editSkillDialogActiveName: 'skill',
                currentStep: 0,
                attachSkillId: null,
                list: [],
                createSkillTab: 'create',
                nextNodeKey: 'next_skill_id',
                attachSkillErrors: {},
                copySkillErrors: {}
            }
        }, methods: {
            getCareerSkills() {//获取列表
                axios.get('careers/' + this.careerId + '/skills').then((response) => {
                    this.list = response.data.data;
                    this.refreshGraphic();
                });

            }, addNewStep() {//新建技能（）
                this.addSkill(this.steps.length)
            }, addSkill(step) {//新建技能
                this.currentStep = step;
                this.createSkillDialogVisible = true;
            // }, linkToOtherNode(ids) {
            //     axios.post('careers/' + this.careerId + '/skills/' + this.focusNodeId, {
            //         next_skill_id: ids
            //     }).then(() => {
            //         this.getCareerSkills();
            //         this.focusNodeId = null;
            //     }).catch(() => {
            //         this.focusNodeId = null;
            //     });

            }, nodeUpdate(node) {
                axios.put('careers/' + this.careerId + '/skills/' + node.id, node.pivot).then(() => {
                    this.refreshGraphic();
                });
            }, nodeAddStep(id) {
                let temp = this.find(id);
                if (temp.pivot.step > 0) {
                    temp.pivot.step--;
                    this.nodeUpdate(temp);
                }
            }, nodeDecreaseStep(id) {
                let temp = this.find(id);
                temp.pivot.step++;
                this.nodeUpdate(temp);
            }, handleCreateSkill(skill) {
                skill.pivot = {
                    step: this.currentStep,
                    career_id: this.careerId,
                    skill_id: skill.id,
                    next_skill_id: []
                };
                this._attachSkill(skill)

            }, _attachSkill(skill) {
                axios.post('careers/' + this.careerId + '/skills/' + skill.id, skill.pivot).then(() => {
                    this.getCareerSkills();
                    this.createSkillDialogVisible = false;
                });
            }, handleEditSkillComplete() {
                this.getCareerSkills();
                this.editSkillDialogVisible = false;
            }, deleteNode(id) {
                this.$confirm('此操作将删除该技能, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.delete('careers/' + this.careerId + '/skills/' + id).then(() => {
                        this.$message.success('删除成功!');
                        this.getCareerSkills();
                    });

                });
            }, editNode() {
                this.editSkillDialogVisible = true;
            }, onSubmitAttachSkill(form) {
                console.log(form)
                this._attachSkill(form);
            }, onSubmitCopySkill(form) {
                console.log(form)
                this.createSkillDialogVisible = false;
            },completeLink(){
                this.getCareerSkills();
            }
        }, created() {
            this.getCareerSkills();
        }
    }
</script>

<style scoped>

</style>